<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('新闻头条')">
    <style>
        .iconImg {
            width: 25px;
            margin-top: -5px;
            margin-right: 3px;
        }
    </style>
</head>
<body>
<nav th:replace="common::commonNav"></nav>

<div class="container-fluid">
    <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
            <p class="bg-info text-light text-center p-2 rounded">新闻类型</p>
            <ul class="nav nav-pills flex-column" th:each="type : ${types}">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{'/fx/headlines/'+${type.code}}">
                        <img class="iconImg" th:src="@{~/img/search.png}"><span th:text="${type.name}"></span>
                    </a>
                </li>
            </ul>
        </nav>

        <main role="main" class="container">
            <div class="col-12 m-2">
                <div class="card">
                    <div style="width: auto;">
                        <div class="card-body table-responsive">
                            <table class="table table-hover" id="table">
                                <tbody id="tbody">
                                <tr th:each="list : ${headlines.get('data')}">
                                    <td th:each="news : ${list.value}">
                                        <div class="card">
                                            <img class="img-fluid" th:src="@{${news.imgURL}}"
                                                 th:alt="${news.authorName}">
                                            <div class="card-body">
                                                <a th:href="@{${news.newsURL}}">
                                                    <span th:text="'['+${news.category}+']'+${news.title}"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer m-auto">
                        <div class="mt-3">
                            <nav>
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item active">
                                        <a href="javascript:void(0);" class="page-link">1</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">2</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">3</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">4</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">5</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">6</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">7</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>

</html>